<!--
 * @Author: your name
 * @Date: 2021-05-07 16:36:51
 * @LastEditTime: 2021-05-07 16:57:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue01d:\HTML001\布局小技巧\练习\vue事件.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
        <!-- 阻止默认事件form表单 -->
        <button @click:stop="fun">点击</button>

        <input type="checkbox" v-model="value">篮球
        <input type="checkbox" v-model="value">足球
        <input type="checkbox" v-model="value">羽毛球
        <dhsj></dhsj>
        <add></add>
        <add></add>
        <comps></comps>
        <dhsj></dhsj>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // 全局组件
        Vue.component("add",{
            template:"<div>全局组件</div>"
        })
        Vue.component("dhsj",{
            template:"<div>全局</div>"
        })
        // 局部组件要注册
        let comps= {
            template:"<div>局部组件</div>"
        }
        let compa={
            template:"<div>局部组件2</div>"
        }
      new Vue({
        el: "#app",
        components:{
            comps,
            compa
        },
        data() {
          return {
            add:[]

          };
        },
        methods:{
            fun(e){

            }
        },
      });
    </script>
  </body>
</html>